
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>仓库库存</span>
          </template>
          <el-table :data="inventory" style="width: 100%">
            <el-table-column prop="warehouse" label="仓库" />
            <el-table-column prop="item_name" label="商品" />
            <el-table-column prop="quantity" label="数量" />
            <el-table-column prop="temperature_range" label="温度要求" />
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>分拣任务</span>
          </template>
          <el-table :data="sortingTasks" style="width: 100%">
            <el-table-column prop="id" label="任务号" />
            <el-table-column prop="warehouse" label="仓库" />
            <el-table-column prop="progress" label="进度">
              <template #default="{ row }">
                <el-progress :percentage="row.progress" />
              </template>
            </el-table-column>
            <el-table-column prop="accuracy" label="准确率">
              <template #default="{ row }">
                <el-tag :type="row.accuracy >= 99.5 ? 'success' : 'warning'">
                  {{ row.accuracy }}%
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const inventory = ref([])
const sortingTasks = ref([])

const loadInventory = async () => {
  const response = await axios.get('/api/warehouse/inventory')
  const allItems = []
  response.data.forEach(warehouse => {
    warehouse.items.forEach(item => {
      allItems.push({
        warehouse: warehouse.warehouse,
        location: warehouse.location,
        ...item
      })
    })
  })
  inventory.value = allItems
}

const loadSortingTasks = async () => {
  const response = await axios.get('/api/warehouse/sorting-tasks')
  sortingTasks.value = response.data
}

onMounted(() => {
  loadInventory()
  loadSortingTasks()
})
</script>
